<template>
  <div id="header" :class="$route.meta.bgwhite ? 'bgWhite' : ''">
    <div class="logo" @click="$router.push('/')">
      <img v-if="!$route.meta.bgwhite" src="../assets/img/logo.png" alt="" srcset="" />
      <img v-else src="../assets/img/logo-blue.png" alt="" />
    </div>
    <div class="nav">
<!--      <div class="nav-item" :class="[active == item.url ? 'active' : '']" v-for="item in navList" :key="item.id"
        @click="navClick(item)">
        {{ item.label }}
      </div>-->
      <div class="login-area">
<!--        <div class="login-btn" v-if="!hasLogin" @click="$router.push('/login')">登录</div>-->
        <div class="avatar" v-if="hasLogin">
          <a-dropdown>
            <a @click.prevent>
              你好,{{ phoneNumber }}
              <DownOutlined />
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item v-for="item in list" :key="item.label" @click="handleFn(item)">
                  {{ item.label }}
                  <PoweroffOutlined v-if="item.label == '退出登录'" />
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </div>
    </div>
  </div>
  <ConfirmModal :identifier="'train'" ref="modalRef"></ConfirmModal>
</template>
<script setup lang="ts">
import { Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import ConfirmModal from '@/views/join/ConfirmModal.vue';
import { createVNode } from 'vue';
import { useStore } from '../store/index.ts';
const store = useStore();
const selectedKeys = ref<string[]>([store.routerIndex]);
const route = useRoute();
const router = useRouter();
const active = computed(() => {
  return route.path;
});
const { hasLogin, userInfo, resumeInfo, resumeProcess } = toRefs(store) as any;
// const userInfo = ref({
//   phone: '182xxxx7343',
// });
interface DropItem {
  label: string;
  url: string;
  id: number;
}
const list = ref<DropItem[]>([
  // { label: '应聘进度', url: '/progress', id: 1 },
  { label: '退出登录', url: '', id: 4 },
]);

const navList = ref([
  { url: '/', id: '1', label: '首页' },
  { url: '/join', id: '2', label: '简历投递' },
]);
const phoneNumber = computed(() => {
  return userInfo.value?.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1XXXX$2');
})

const handleFn = async (item: DropItem) => {
  console.log(resumeProcess.value, 'ssss')
  if (item.id != 4) {
    // router.push(item.url);
    router.push(
      {
        path: '/progress',
        query: resumeProcess.value
      }
    )
  } else {
    Modal.confirm({
      title: '确认退出？',
      icon: createVNode(ExclamationCircleOutlined),
      content: '请确认是否退出',
      okText: '确认',
      centered: true,
      cancelText: '取消',
      onOk() {
        localStorage.clear();
        store.$patch({
          hasLogin: false,
          userInfo: {},
          resumeInfo: {}
        })
        router.push('/login');
      },
    });
  }
};
const modalRef = ref<typeof ConfirmModal>(ConfirmModal)
const navClick = (item) => {
  if (resumeInfo.value.resumesStatus == 1 && item.url == '/join') {
    modalRef.value.show()
  } else {
    router.push(item.url)
  }
}

watch(
  () => store.routerIndex,
  (newValue) => {
    selectedKeys.value = [newValue];
  }
);


</script>
<style scoped lang="scss">
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 72px;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(50px);
  display: flex;
  align-items: center;
  padding: 0 360px;
  box-sizing: border-box;
  justify-content: space-between;
  z-index: 1000;

  .logo {
    height: 40px;
    cursor: pointer;

    img {
      height: 40px;
    }
  }

  .nav {
    display: flex;
    gap: 0 50px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    align-items: center;
  }
}

.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

  &::after {
    position: absolute;
    content: '';
    width: 110%;
    height: 2px;
    background: #fff;
    bottom: -7px;
  }
}

.login-area {
  .login-btn {
    width: 74px;
    height: 40px;
    background: rgba(217, 217, 217, 0);
    border-radius: 3px 3px 3px 3px;
    border: 1px solid #ffffff;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
  }

  .avatar {
    :deep(.ant-dropdown-trigger) {
      color: #fff;
    }
  }
}

#header.bgWhite {
  background: #ffffff;

  .nav,
  .ant-dropdown-trigger {
    color: #000000 !important;
  }


  .iconfont {
    color: #000000;
  }

  img {
    //height: 80px;
  }

  .icon {
    color: #000000;
  }
}
</style>
